.shadow_css_message {
    /* 不显示 */
    display: none;
    /* 定位 */
    position: absolute;
    /* 距上多少 */
    top: 0%;
    /* 距左多少 */
    left: 0%;
    /* 宽 */
    width: 100%;
    /* 高 */
    height: 100%;
    /* 背景色 */
    background-color: black;
    /* 盒子在当前层叠上下文中的层叠等级 优先级高的覆盖低的 */
    z-index: 10;
    /* 为mozilla firefox 设置透明度  */
    -moz-opacity: 0.6;
    /* 设置透明度 */
    opacity: .60;
    /* 为IE 设置透明度  */
    filter: alpha(opacity=66);
}

.window_css_message {
    /* 不显示 */
    display: none;
    /* 定位 */
    position: absolute;
    /* 距上多少 */
    top: 5%;
    /* 距左多少 */
    left: 20%;
    /* 宽 */
    width: 60%;
    /* 高 */
    height: 90%;
    /* 边框 */
    border: 3px solid honeydew;
    /* 背景色 */
    background-color: white;
    /* 盒子在当前层叠上下文中的层叠等级 优先级高的覆盖低的 */
    z-index: 11;
}

.right_a {
    margin: 0 87%;
    font-size: 30px;
    text-align: center;
    width: 100px;
    text-decoration: none;
    display: block;
}

.window_css_message h1 {
    float: left;
    font-size: 15px;
    margin: 10px 40%;
    width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window_css_dialogue_message {
    /* 边框 */
    border: 1px solid #f0f4fd;
    /* 文本居中 */
    --text-align: center;
    font-size: 25px;
    /* 高 */
    height: 64%;
    /* 文本垂直超出显示垂直滚动 */
    overflow-y: auto;
}

/* 聊天框 */
.m-ul {
    list-style: none;
    /* 填充内边距 */
    padding: 20px;
    margin: 0;
    font-size: 15px;
    /* 多行文本的间距 */
    line-height: 20px;
}

li.left {
    /* 左边文本距右距离 */
    margin-right: 35%;
}

li.left span {
    /* 内联 */
    display: inline-block;
    /* 聊天气泡 四个角弧线 */
    border-radius: 25px 25px;
    /* 气泡背景色 */
    background-color: rgba(0, 0, 0, 0.1);
    padding: 10px 15px;
    max-width: 400px;
    /* 当内容超出宽度时进行自动换行 */
    word-wrap: break-word;
    /* 避免内容溢出 */
    overflow-wrap: break-word;
}

li.right {
    /* 右边文本距左距离 */
    margin-left: 35%;
    /* 文本居右 */
    text-align: right;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

li.right span {
    /* 内联 */
    display: inline-block;
    /* 聊天气泡 四个角弧线 */
    border-radius: 15px 0 15px 15px;
    /* 气泡背景色 */
    background-color: #1772f6;
    color: azure;
    padding: 10px 15px;
    max-width: 400px;
    /* 当内容超出宽度时进行自动换行 */
    word-wrap: break-word;
    /* 避免内容溢出 */
    overflow-wrap: break-word;
}

li + li {
    margin-top: 20px;
}

li.right span {
    text-align: left;
}

li.left {
    text-align: justify;
}

li.right span {
    text-align: justify;
}

.editor {
    height: 93px;
}

.dropdown {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: -5px;
}

.dropdown-content {
    display: none; /*!important;*/
    position: absolute;
    background-color: #ffffff;
    width: 400px;
    height: 400px;
    margin-top: 60px;
    border-radius: 10px;
    box-shadow: -2px 0px 21px 0px rgba(190, 190, 190, 0.56);
    left: -170px;
}

.chatlist {
    position: relative;
    overflow-y: auto;
}

.chatlist .block {
    position: relative;
    width: 97%;
    display: flex;
    align-items: center;
    padding: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.chatlist .block.active {
    background: #ffffff;
}

.chatlist .block:hover {
    background: #f8f8fa;
}

.chatlist .block .imgbx {
    position: relative;
    min-width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
}

.chatlist .block .details {
    position: relative;
    width: 100%;
}

.chatlist .block .details .listHead {
    display: flex;
    justify-content: space-between;
}

.chatlist .block .details .listHead h4 {
    font-size: 1.0em;
    font-weight: 600;
    color: #111;
    width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatlist .block .details .listHead .time {
    font-size: 0.75em;
    color: #aaa;
}

.chatlist .block .details .listHead .time {
    color: #111;
}

.message_p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
}

.message_p p {
    color: #aaa;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30%;
}

.message_p b {
    background-color: red;
    color: #fff;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75em;
}

.button1 {
    width: 50px;
    height: 30px;
    /* 文字颜色为白色 */
    color: #fff;
    /* 字体设置 */
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    /* 圆角处理 */
    border-radius: 10px;
    /* button阴影设置 */
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
    /* 设置过渡属性  所以元素过渡 持续时间：0.3s 速度曲线类型：ease*/
    transition: all 0.3s ease;
    /* 鼠标停留时，变为小手 */
    cursor: pointer;
    border: none;
    position: relative;
    /* 行高  */
    line-height: 20px;
    padding: 0;
    margin-right: 10px;
}

.button1 {
    /* button背景色为渐变蓝色 */
    float: right;
    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
}

body{
    background: #f4f6f9;
}
.m-ul img{
    width: 30px;
    height: 30px;
}